<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border:1px solid #000;
        }
        #contentDiv{
            width: 1000px;
            height: 800px;
            margin: auto; /*让div居中*/
        }
        #cdiv{
            width: 200px;
            height: 200px;
            overflow-y: scroll;/*超出部分以滚动条显示*/
                               /*hidden;/*超出部分做隐藏处理*/
            font-family: 楷体;/*字体类型*/
            font-size: 20px; /*字体大小*/
            font-weight: bold;/*字重*/
        }
        #title{
            width: 100px;
            display: inline-block;
            text-align: center; /*文本对齐方式*/
        }
        #oldPrice{
            text-decoration: line-through; /*穿过线*/
        }
        #currentPrice{
            text-decoration: underline;/*下划线*/
        }
        #jump{
            text-decoration: none;/*去除超链接下划线*/
        }
        #titleSpan{
            position: relative;
            top: 50px;
            left: 30px;
        }
        .floatDiv{
            background-color: red;
            width: 200px;
            height: 200px;
            position: fixed;
            top:50px;
            left: 50px;
            z-index: 1;
        }

        #faceImg{
            border-radius: 100px;
            opacity: 0.5;
        }

        .dialog{
            width: 100%;
            height: 100%;
            position: fixed;
            top:0px;
            left:0px;
            background-color: rgba(255,0,0,0.5);
        }
    </style>
</head>
<body>
    <div id="contentDiv">
        <div id="cdiv">
            北国风光<br>
            千里冰封<br>
            北国风光<br>
            千里冰封<br>
            北国风光<br>
            千里冰封<br>
            北国风光<br>
            千里冰封<br>
            北国风光<br>
            千里冰封<br>
            北国风光<br>
            千里冰封<br>
            北国风光<br>
            千里冰封<br>
        </div>

        <span id="title">猪肉</span>
        原价：<span id="oldPrice">$20</span>
        现价：<span id="currentPrice">$18</span>
        <a href="#" id="jump">跳转页面</a>

        <div>
            <span style="visibility: hidden">江湖传说，</span>大侠郭靖<br>
            <span style="display: none">江湖传说，</span>大侠郭靖
        </div>

        <div style="display: flex">
            <div style="border-width:30px;margin-left:10px;margin-right:30px;
            padding-left:200px;height: 300px;width: 300px">
                <span>内容</span>
            </div>
            <div style="height: 300px;width: 300px">
                <div class="floatDiv"></div>

                <div class="floatDiv" style="z-index:0;background-color: blue;top:100px;left: 100px"></div>

            </div>
        </div>

        <div>
            <p>
                <span id="titleSpan">今年灾害</span>
                <span>疫情、酷热、地震</span>
            </p>

        </div>

        <img width="200" height="200" src="../img/6.jpg" id="faceImg"/>

        <div class="dialog" style="display: flex;
        justify-content: center;align-items: center">

            <div style="background-color:white;width: 50%;height: 40%">
                请输入姓名：<input type="text">
            </div>
        </div>
    </div>
</body>
</html>